import React, {Component} from "react";
import {ListGroup, Jumbotron} from "react-bootstrap";
import {getTickets} from './utils'

function timestampToTime(date) {
    return date.substr(0, 10) + ' ' + date.substr(11, 8)
}

class Account extends Component {
    state = {tickets: []}

    constructor(props) {
        super(props);
        this.getTickets()
    }

    async getTickets() {
        let tickets = await getTickets(this.props.state.token)
        this.setState({tickets: tickets})
    }

    render() {
        let self = this;
        console.log(self.state.tickets)
        return (
            <div>
                <Jumbotron>
                    <h1>余额：</h1>
                    <p>{(this.props.state.user.balance / 100).toFixed(2)}元</p>
                    <h1>历史账单：</h1>
                    <ListGroup>
                        {
                            self.state.tickets.map((ticket) => (<p>
                                借：{timestampToTime(ticket.start)}
                                <br />
                                还：{timestampToTime(ticket.end)}
                                <br />
                                价格：{(ticket.price / 100).toFixed(2)}元
                            </p>))
                        }
                    </ListGroup>
                </Jumbotron>
            </div>
        )
    }
}

export {Account}